<template>
    <div style="position:relative;">  
        <div 
            :class="{ 'custom-tooltip':true, 'top':data[index].pos === 'top', 'bottom':data[index].pos === 'bottom' }"
            :style="{
                left:data[index].x + '%',
                top:data[index].y + '%',
            }"
        >
            <div style="font-size:16px; font-weight:bold; margin-bottom:14px; ">{{ data[index].title }}</div>
            <div>{{ data[index].content }}</div>
        </div>
        <img :src="bgImg" style="width:100%;" />
    </div>
</template>
<script setup>
    import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
    import bgImg from '../../../../public/tabs-bg-5.png';
    const timer = ref(null);    
    const index = ref(0);
    const data = [
        { x:30.3, y:37.4, pos:'top', title:'自动预热/保温算法', content:'结合生产计划、窑炉预热所需时间和所需能源，利用混合整数线性规划（MILP）构建优化模型，计算最优方式和时间。' },
        { x:42.2, y:29.6, pos:'bottom', title:'预热和电加热调度算法', content:'满足工艺要求前提下，利用混合整数线性规划（MILP）或动态规划构建优化模型，最大化利用尾气余热，减少电加热的使用时长。' },
        { x:42.2, y:86.7, pos:'top', title:'光照预测算法', content:'结合往期季节数据、气象情况、光伏板面积、光伏板劣化情况和光伏板洁净度，预测光照及光伏电能产量。并选择合适的机器学习模型进行训练，例如：时间序列模型：ARIMA、SARIMA、LSTM等。回归模型：线性回归、随机森林、梯度提升回归等。来提高预测精度。'},
        { x:53.5, y:86.7, pos:'top', title:'电能供应算法', content:'结合储能的智能充放算法、光伏的光照预测算法以及市电的阶梯电价成本寻优算法，利用线性规划（LP）或混合整数线性规划（MILP）构建综合优化模型，计算最优能源供给方案。' }
    ];
    onMounted(()=>{
        clearInterval(timer.value);
        timer.value = setInterval(()=>{
            let newIndex = index.value + 1;
            index.value = newIndex % 4;
        }, 4000)
    })
    onBeforeUnmount(()=>{
        clearInterval(timer.value);
    })
</script>
<style scoped>
    .custom-tooltip {
        position:absolute;
        width:340px;
        background:rgba(255, 255, 255, 0.95);
        padding:16px 32px;
        border-radius:8px;
        text-align:left;
        box-shadow:rgba(57, 58, 63, 0.15) 0px 2px 8px 2px;
    }
    .custom-tooltip::after {
        content:'';
        position:absolute;
        left:50%;
       
    }
    .custom-tooltip.top::after {
        top:100%;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fff;
        transform:translate(-50%, 0 );
    }
    .custom-tooltip.bottom::after {
        top:-10px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
        transform:translate(-50%, 0);
    }
    .custom-tooltip.top {
        transform:translate(-50%, -110%);
    }
    .custom-tooltip.bottom {
        transform:translate(-50%, 20%);
    }
</style>
